import React, { useEffect} from 'react'
import Loading from '@/components/loading'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Loadable from 'react-loadable'
import style from './app.module.scss'
import { addViewCount } from '@/api'
import { storage, isPc } from '@/utils/utils'
import store from '@/utils/store'
import './app.scss'
import PassMode from '@/components/passMode'
import Move from '@/components/move'
store.token = storage.get('token')
/* function importComponent(path: string) {
  return Loadable({
    loader: () => import(`${path}`),
    loading() {
      return <Loading />
    },
  })
} */
const NewAdd = Loadable({
  loader: () => import('@/pages/newadd'),
  loading() {
    return <Loading />
  },
})
const Header = Loadable({
  loader: () => import('@/layout/Header'),
  loading() {
    return <Loading />
  },
})
const Catalog = Loadable({
  loader: () => import('@/components/catalog'),
  loading() {
    return <Loading />
  },
})

const Index = Loadable({
  loader: () => import('@/pages/index/index'),
  loading() {
    return <Loading />
  },
})

const Detail = Loadable({
  loader: () => import('@/pages/detail'),
  loading() {
    return <Loading />
  },
})

const NoPage = Loadable({
  loader: () => import('@/pages/nopage'),
  loading() {
    return <Loading />
  },
})

const Manage = Loadable({
  loader: () => import('@/pages/manage'),
  loading() {
    return <Loading />
  },
})
export default function App() {
  const isPcStatus = isPc()
  useEffect(() => {
    addViewCount()
  }, [])
  return (
    <>
      {isPcStatus ? (
        <div className={style.App}>
          <BrowserRouter>
            <Switch>
              <Route exact path="/newadd" component={NewAdd} />
              <Route exact path="/manage" component={Manage} />
              <Route
                exact
                render={() => {
                  return (
                    <div className={style.container}>
                      <div className={style.header}>
                        <Header></Header>
                      </div>
                      <div className={style.content}>
                        <div className={style.content_left}>
                          <Switch>
                            <Route
                              exact
                              path="/detail/:id"
                              component={Detail}
                            />
                            <Route exact path="/" component={Index} />
                            <Route component={NoPage} />
                          </Switch>
                        </div>
                        <div className={style.content_right}>
                          <div className={style.info}></div>
                          <Catalog />
                        </div>
                      </div>
                      <div className={style.footer}>
                        <a href="http://www.beian.miit.gov.cn">
                          © 2021 www.caicailv.cn 菜菜驴 辽ICP备18015879号
                        </a>
                      </div>
                    </div>
                  )
                }}
              />
            </Switch>
            <PassMode />
          </BrowserRouter>
        </div>
      ) : (
        <Move />
      )}
    </>
  )
}
